<template>
  <div class="siteAside-container">
    <div class="siteAside-header">
      <template v-if="data">
        <Avatar :url="data.avatar" />
        <div class="siteAside-name">{{ data.siteTitle }}</div>
      </template>
    </div>
    <Menu v-if="data"/>
    <div class="siteAside-footer">
      <Contact v-if="data"/>
    </div>
  </div>
</template>

<script>
import Avatar from "@/components/Avatar";
import Contact from "./Contact";
import Menu from "./Menu";
export default {
  components: {
    Avatar,
    Contact,
    Menu,
  },
  computed: {
    data() {
      return this.$store.state.setting.data;
    },
  },
};
</script>

<style lang='less' scoped>
@import "~@/styles/global.less";
.siteAside-container {
  width: 250px;
  height: 100%;
  overflow-y: hidden;
  background-color: @dark;
  .siteAside-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 0 5px;
    .siteAside-name {
      padding: 13px 0 0;
      color: @gray;
    }
  }
  .siteAside-footer {
    margin-top: 20px;
  }
}
</style>